<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="jquery-3.1.1.js">
        
    </script>
    <style>
        div{
            width: 264px;
            margin: 0px auto;
            line-height: 30px;
            text-align: center;
            font-family: '黑体';
            font-size: 20px;
            cursor: pointer;
            overflow: hidden;
           
        }
        div:nth-of-type(1){
            height: 200px;
            position: relative;
        }
        ul{
            list-style: none;
            margin: 0;
        padding: 0;
        display: none;
        }
        span{
            display: inline-block;
            width: 130px;
            height: 30px;
            border:1px solid lightgray;
        }
        ul:nth-of-type(1){
            float: left;
        }
        ul:nth-of-type(2){
            float: right;
        }
        li{
            width: 130px;
            height: 30px;
            border:1px solid lightgray;
        }
        P{
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div>
        <span>销售订单</span><span>消费订单</span>
        <div>
    <ul>
        <li>订单1</li>
        <li>订单2</li>
        <li>订单3</li>
    </ul>
    <ul>
        <li>消费1</li>
        <li>消费2</li>
        <li>消费3</li>
    </ul>
    </div>
    <p></p>
    </div>

</body>
</html>
<script>
    $(function(){
    
        $('span').each(function(index){
          
            $(this).mouseenter(function(){
                var num = $(this).index()            
                // console.log($('ul')[num])
                var ul = $($('ul')[num]);
                ul.css('display','block').siblings().css('display','none');

                $('ul li').each(function(index){
                         $(this).mouseenter(function(){
                            $(this).css('backgroundColor','gray').siblings().css('backgroundColor','white');                     
                    })
                   
                        $(this).mousedown(function(){
                            $('p').html($(this).html())
                            $(this).parent().css('display','none')
                        })
                })
            })
           

        })

    })
</script>